<template>
	<view class="page-wraper">
		<customNav bgColor="#3957BF" title1="我的报价" backIcon="true" backIconColor="white">
		</customNav>
		<!-- <addressSearch @addressBtn='addressBtn' @searchBtn='searchBtn'></addressSearch> -->
		<!-- <view class="contentViewBox">
			<cssArcBackground bgColor="#3957BF" height="30" />
		</view> -->
		<view v-if="ISNoData" class="NO-DATA-view-box-class">
			<image class="NO-DATA-image-view-class" src="@/static/NoDataBac.png"></image>
			<view class="NO-DATA-text-chushou-class">暂无数据</view>
		</view>
		<view class="" style="" v-else>
			<view v-for="(item,index) in offerList" :key="index" @click="clickOffer(item)" class="simple_card"
				style="background-color: white; height:auto">
				<view style="display: flex;justify-content: flex-end;">
					<view class="tag">
						<text v-if="item.urgent_search == 1" class="tag-text">急寻</text>
					</view>
				</view>
				<view class="card_title">
					{{item.model_name}}
				</view>
				<view style="margin-left: 10px; margin-top: 10px; flex-direction: row; display: flex; flex-wrap: wrap;">
					<view class="note_tag" v-for="(itm, i) in item.notes" :key="i">
						{{itm}}
					</view>
				</view>
				<view style="margin: 8px 14px 0px 14px; display: flex; flex-direction: row">
					<view class="price" style="flex: 1;">
						我的报价：
						<text class="price_num">{{item.quotation_price}}</text>
						万
					</view>
					<view class="date">
						{{item.create_time}}
					</view>
				</view>

				<view class="seprate_line"></view>

				<view class="cancel_txt"
					style=";flex-direction: row; display: flex;padding-bottom: 15px; margin: 8px 14px 0px 14px;">
					<text v-if="item.cancel == 1">供应商报价中</text>
					<text v-if="item.cancel == -1">已取消报价</text>
					<view style="flex:1"></view>
					<text style="font-size: 11px;">已有{{item.quotation_number}}人报价</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	import {
		getQuotationList
	} from '@/api/secondhandCar.js'

	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground
		},
		data() {
			return {
				offerList: [{}, {}, {}, {}],
				ISNoData: false

			}
		},
		onLoad() {

			try {
				const value = uni.getStorageSync('login');
				let userId = value.id
				let params = {
					"users_id": userId,
					"page_num": '15'
				}

				console.log('=========' + params)

				getQuotationList(params)
					.then(res => {
						if (res.code === 0) {
							this.offerList = res.data.data
							if (this.offerList.length <= 0) {
								this.ISNoData = true
							}
						}
					})

			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			clickOffer(item) {
				uni.navigateTo({
					url:"/secondhandCar/serachCarDetails/serachCarDetails?id=" + item.car_search_id
				})
			}
		}
	}
</script>

<style>
	.cancel_txt {
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.seprate_line {
		margin-top: 20px;
		width: 100%;
		height: 0px;
		border: 1px solid #00000004;
	}

	.price {
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.price_num {
		color: #ED2F2F;
	}

	.date {
		font-size: 11px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.note_tag {
		/* width: 88px; */
		/* height: 25px; */
		background: #EDF1FF;
		opacity: 1;
		border-radius: 4px;
		margin-left: 5px;
		font-size: 13px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #0E59EA;
		padding: 5px 14px 5px 14px
	}

	.card_title {
		font-size: 16px;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		margin-left: 14px;
	}

	.tag-text {
		font-size: 12px;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #0E59EA;
		opacity: 1;

	}

	.tag {
		width: 98px;
		height: 25px;
		background: linear-gradient(263deg, rgba(14, 89, 234, 0.2) 0%, rgba(242, 242, 242, 0.22) 100%);
		opacity: 0.97;
		border-radius: 0px 7px 0px 7px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.simple_card {
		margin: 10px 14px 0px 14px;
		background: white;
		border-radius: 7px;
	}

	.page-wraper {
		position: absolute;
		top: 0px;
		height: 100%;
		width: 100%;
		background-color: #F2F2F2;
	}

	.NO-DATA-view-box-class {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.NO-DATA-image-view-class {
		width: 380rpx;
		height: 380rpx;
		margin: auto;
		margin-top: 208rpx;
	}

	.NO-DATA-text-chushou-class {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C2125;
		opacity: 1;
	}
</style>